<template>
	<view class="container">
		<van-sticky>
			<van-search shape="round" placeholder="请输入关键词" :value="condition" @change="changeValue"
				use-action-slot>
				<view slot="action" @click="search">搜索</view>
			</van-search>
			<van-tabs :active="active" @click="onClick">
				<van-tab title="全部"></van-tab>
				<van-tab title="捐赠信息"></van-tab>
				<van-tab title="需求信息"></van-tab>
			</van-tabs>
		</van-sticky>
		<view v-if="isFalse">
			<u-empty mode="search" text="没有搜索结果" margin-top="200" />
		</view>
		<view class="item" right-width="65" @click="item.isDonation==0 ? NeedDetail(item) : DonateDetail(item)"
			v-for="item in searchList" :key="item.goodsId">
			<image :src="item.picture">
			</image>
			<view class="right">
				<span class="bookTitle">{{item.title}}</span>
				<span class="author">新旧程度: {{item.author}}</span>
				<span class="message">{{item.goodsDesc}}</span>
			</view>
			<view class="tag">
				<view v-if="active == 0">
					<u-tag text="收" plain size="mini" type="warning" v-if="item.isDonation==0"></u-tag>
					<u-tag text="捐" plain size="mini" type="success" v-else></u-tag>
				</view>
			</view>
		</view>
	</view>

</template>
<script>
	export default {
		data() {
			return {
				active: 0,
				title: ['全部', '捐赠信息', '需求信息'],
				isFalse: false, //空提醒
				condition: '',
				searchList: []
			}
		},
		onShow() {
		},
		methods: {
			// 双向绑定搜索框的值
			changeValue(e) {
				this.condition = e.detail
			},
			// 点击tab导航项时触发
			onClick(e) {
				this.active = e.detail.index
				console.log(this.active);
				this.search()
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 200
				})
			},
			// 点击搜索展示物品信息
			async search(title) {
				var that = this;
				if (this.active == 0) { //显示查询的所有数据
					const {
						data: res
					} = await this.$myRequest({
						url: '/goodsBefore/findGoods',
						method: 'post',
						data: {
							title: that.condition,
							isDonation: ''
						},
					})
					if (res.code == 20000) {
						this.searchList = res.data.list
						this.isFalse = this.searchList.length ? false : true
					}
				} else if (this.active == 1) { //展示查询到的捐赠信息
					const {
						data: res
					} = await this.$myRequest({
						url: '/goodsBefore/findGoods',
						method: 'post',
						data: {
							title: that.condition,
							isDonation: 1
						},
					})
					if (res.code == 20000) { 
						this.searchList = res.data.list
						this.isFalse = this.searchList.length ? false : true
					}
				} else { //展示查询到的需求信息
					const {
						data: res
					} = await this.$myRequest({
						url: '/goodsBefore/findGoods',
						method: 'post',
						data: {
							title: that.condition,
							isDonation: 0
						},
					})
					if (res.code == 20000) {
						this.searchList = res.data.list
						this.isFalse = this.searchList.length ? false : true
					}
				}

			},
			// 跳转到捐赠详情页
			DonateDetail(info) {
				console.log(info);
				uni.navigateTo({
					url: '/page_index/DonateDetail?info=' + encodeURIComponent(JSON.stringify(info))
				})
				this.addHistory(info)
			},
			// 跳转到需求详情页
			NeedDetail(info) {
				uni.navigateTo({
					url: '/page_index/NeedDetail?info=' + encodeURIComponent(JSON.stringify(info))
				})
				this.addHistory(info)
			},
		}
	}
</script>

<style lang="scss" scoped>
	/deep/ .van-tabs__line {
		background-color: #d81e06;
	}

	/deep/ .van-ellipsis {
		font-size: 28rpx;
		font-weight: bold;
		title-inactive-color: #8a8a8a;
		border-radius: 30rpx;
	}

	.item {
		border-radius: 20rpx;
		background-color: #fff;
		margin: 10rpx 20rpx;
		height: 250rpx;
		width: 710rpx;
		display: flex;

		image {
			width: 160rpx;
			height: 200rpx;
			margin: 20rpx 20rpx;
		}

		.right {
			margin-left: 20rpx;
			width: 420rpx;

			.bookTitle {
				display: block;
				color: #d81e06;
				margin-top: 20rpx;
				font-size: 28rpx;
				font-weight: bold;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.author {
				display: block;
				font-size: 24rpx;
				color: gray;
				margin-top: 20rpx;
			}

			.message {
				font-size: 24rpx;
				margin-top: 20rpx;
				overflow: hidden;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				text-overflow: ellipsis;
			}
		}

		.tag {
			margin-right: 20rpx;
			margin-top: 190rpx;
		}

	}
</style>
